import React, { useState } from "react";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Navigate,
} from "react-router-dom";
import LazyLoadComponent from "./utils/lazyCom";

const Login = LazyLoadComponent(
  () => import(/* webpackChunkName: "RMX-Login" */ "./pages/login")
);
const Backend = LazyLoadComponent(
  () => import(/* webpackChunkName: "RMX-Backend" */ "./pages/backend")
);
const Welcome = LazyLoadComponent(
  () => import(/* webpackChunkName: "RMX-Welcome" */ "./pages/welcome")
);

const App = () => {
  const [user, setUser] = useState<any>(null);

  const handleLogin = (username: string, password: string) => {
    // 模拟登录逻辑
    if (username === "admin" && password === "admin") {
      setUser({ username, role: "admin" });
    } else {
      setUser({ username, role: "user" });
    }
  };

  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login onLogin={handleLogin} />} />
        <Route
          path="/admin"
          element={
            user?.role === "admin" ? <Backend /> : <Navigate to="/login" />
          }
        />
        <Route
          path="/welcome"
          element={user ? <Welcome /> : <Navigate to="/login" />}
        />
        <Route path="/" element={<Navigate to="/login" />} />
        <Route path="/404" element={<div>没找到</div>} />
        <Route path="*" element={<Navigate to="/404" />} />
      </Routes>
    </Router>
  );
};

export default App;
